<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
       .box{
        width: 600px;
        height: 40px;
        border: 1px solid black;
        margin: 10px 20px;
        display: flex;
        justify-content: space-around;
        line-height: 40px;
       }
       span{
        width: 100px;
        text-align: center;
        cursor: pointer;
        position: relative;
       }
       .active{
        background-color: aqua;
       }
       .uls{
        width:90px;
        background-color: rgb(243, 245, 247);
        box-shadow: 10px 10px 10px rgba(173, 171, 171, 0.3);
        display: none;
        position: absolute;
        top:42px;
        left: 0;
       }
         
       .uls li{
        width:100%;
        list-style: none;
       }
    </style>
</head>
<body>
     <div class="box">
        <span>
          湖北
          <ul class="uls">
            <li>十堰市</li>
             <li>刘堰</li>
          </ul>
        </span>
        <span>上海
       
        </span>
        <span>广州</span>
     </div>
    <script>
      let box= document.querySelector(".box")
      let spans= box.querySelectorAll("span")
       let uls=  document.querySelector(".uls")
    //   spans.forEach(item=>{
    //     item.onmouseover=function(){
    //         spans.forEach(item=>{
    //             item.classList.remove("active")
    //         })
    //         this.classList.add("active")
    //     }
    //   })
    for(let i=0; i<spans.length; i++){
        spans[i].onmouseover=function(){
            spans.forEach(item=>{
                item.classList.remove("active")
            })
            this.classList.add("active")
            uls.style.display="block"
        }
        spans[i].onmouseout=function(){
            uls.style.display="none"
        }
        spans[i].onclick=function(){
            spans.forEach(item=>{
                item.classList.remove("active")
            })
            this.classList.add("active")
            uls.style.display="none"
        }
    }
 
    </script>
</body>
</html>